<template>
	<view>
		<u-navbar title="明细"></u-navbar>
		<view class="balance-detail">
			<edu-mescroll-body @init="mescrollInit" @down="refresh" @up="reachBottom">
				<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
					<view class="left">
						<view class="name u-line-1">{{ item.note }}</view>
						<view class="date">{{ item.create_time | timeFormat }}</view>
					</view>
					<view class="price" :class="[item.alter_type == 1 ? 'red' : '']">{{ item.alter_type == 1 ? '+' : '-' }}{{ item.num | formatCurrency }}</view>
				</view>
			</edu-mescroll-body>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: []
		};
	},
	methods: {
		// 上拉加载更多
		reachBottom(page) {
			this.$edu.api
				.getUserBalanceFlow({
					page: page.num,
					count: page.size
				})
				.then(res => {
					const { data } = res;
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(data.data);
					this.mescroll.endBySize(data.data.length, data.total);
				});
		},
		// 下拉刷新
		refresh() {
			this.mescroll.resetUpScroll();
		}
	}
};
</script>

<style lang="scss" scoped>
.balance-detail {
	min-height: calc(100vh - 44px);
	background-color: #fff;
	.scroll {
		height: 100%;
	}
	.item {
		padding: 40px 30rpx 24rpx 0;
		margin-left: 30rpx;
		display: flex;
		.name {
			max-width: 530rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: $edu-main-color;
		}
		.date {
			margin-top: 25rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: $edu-content-color;
		}
		.price {
			margin-left: auto;
			font-size: 30rpx;
			font-weight: 500;
			color: $edu-main-color;
			&.red {
				color: $edu-price-color;
			}
		}
	}
}
</style>
